<template>
  <div id="app">
      <h1>{{title}}</h1>
      <router-link to='/login'>登录</router-link>
      <router-link to='/register'>注册</router-link>
      <router-view></router-view>

    <mt-button type="primary" size="normal" @click='showtip'>primary</mt-button>
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">Home</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
          <div class="mui-media-body">Email</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-chatbubble"></span>
          <div class="mui-media-body">Chat</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-location"></span>
          <div class="mui-media-body">location</div></a></li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  //负责导出.vue组件对象（它本质上是一个vue对象，所以vue中该定义的元素都可以使用）
  export default {
    name: 'App',
    data: function () {
      return {
          title:'路由vue-router'
      }
    },

    methods: {
        showtip:function () {
          Toast('请先登录');
        }
    }
  }
</script>

<style scoped>

</style>
